<template>
  <view class="content">
    <view class="bg-image">
      <image class="bgImage" :src="bgImageSrc"></image>
    </view>
    <!-- 标题 -->
    <view class="activity-title">{{task.title}}</view>
    <view class="activity-detail">{{task.detail}}</view>
    
    <view class="line-box">
        <!-- <u-divider text="分割线" 
          :hairline="false"
          :lineColor="rgba(204, 204, 204, 1)"
       ></u-divider> -->
       <view class="left-line"></view>
       <view class="devide-text">任务详情</view>
       <view class="right-line"></view>
     </view>
     
     <view class="activity-body">
       <view class="activity-status-end" v-if="task.finished">
         <view class="body-icon">
           <u-icon name="close" size="20"></u-icon>
         </view>
         <view class="body-name">状态</view>
         <view class="body-suffix">已结束</view> 
       </view>
       
       <view class="activity-status" v-if="!task.finished">
         <view class="body-icon">
           <u-icon name="checkmark" size="20"></u-icon>
         </view>
         <view class="body-name">状态</view>
         <view class="body-suffix">进行中</view>
       </view>
       <view class="body-item">
         <view class="body-icon">
           <u-icon name="man-add-fill" size="20"></u-icon>
         </view>
         <view class="body-name">活动人数</view>
         <view class="body-suffix">{{task.userNum}}</view>
       </view>
       <view class="body-item2">
         <view class="body-icon">
           <u-icon name="account" size="20"></u-icon>
         </view>
         <view class="body-name">负责人</view>
         <view class="body-suffix">{{task.admin.name}}</view>
       </view>
       
       <view class="body-item-phone">
         <view class="body-icon">
           <u-icon name="phone" size="20"></u-icon>
         </view>
         <view class="body-name">电话</view>
         <view class="body-suffix">{{task.admin.phone}}</view>
       </view>
       
       <view class="body-item-start-time">
         <view class="body-icon">
           <u-icon name="clock" size="20"></u-icon>
         </view>
         <view class="body-name">发布时间</view>
         <view class="body-suffix">{{task.publishTime}}</view>
       </view>
       
       <view class="body-item-start-time">
         <view class="body-icon">
           <u-icon name="clock" size="20"></u-icon>
         </view>
         <view class="body-name">开始时间</view>
         <view class="body-suffix">{{task.startTime}}</view>
       </view>
       
       <view class="body-item-start-time">
         <view class="body-icon">
           <u-icon name="clock" size="20"></u-icon>
         </view>
         <view class="body-name">结束时间</view>
         <view class="body-suffix">{{task.endTime}}</view>
       </view>
       
       <view class="body-item-address">
         <view class="body-icon">
           <u-icon name="map" size="20"></u-icon>
         </view>
         <view class="body-name">地址</view>
         <view class="body-suffix">{{task.address}}</view>
         <view class="user-list">
           
         </view>
       </view>
       
       <!-- 参与人数 -->
       <view class="body-join-user">
         <view class="suffix">
           <view class="body-icon">
             <u-icon name="list" size="20"></u-icon>
           </view>
           <view class="body-name">参与人员</view>
           <view class="body-suffix">更多</view>
           <view class="body-icon-suffix">
             <u-icon name="arrow-right" size="12"></u-icon>
           </view>
         </view>
         <scroll-view :scroll-x="true" class="user-list">
           <view class="scroll-box" :style="{width: scrollWith}">
             <view class="user-item" v-for="(item,index) in task.joinedUser" :key="item.id" 
             @click.native="toUserDetail(item.id)">
               <view class="user-name">{{item.name}}</view>
               <view class="user-phone">{{item.phone}}</view>
               <view class="user-detail">
                 <view class="detail-text">详情</view>
                 <view class="icon"><u-icon name="arrow-right" color=" rgba(42, 199, 123, 1)"
                  size="12"></u-icon></view>
               </view>
             </view>
           </view>
           <!--  -->
         </scroll-view>
       </view>
       
       <view class="user-line"></view>
       <!-- 预备人数 -->
       <view class="body-join-user">
         <view class="suffix">
           <view class="body-icon">
             <u-icon name="list" size="20"></u-icon>
           </view>
           <view class="body-name">指定人员</view>
           <view class="body-suffix">更多</view>
           <view class="body-icon-suffix">
             <u-icon name="arrow-right" size="12"></u-icon>
           </view>
         </view>
         <scroll-view :scroll-x="true"  class="user-list">
           <view class="scroll-box" :style="{width: scrollWith}">
              <view class="user-item" v-for="(item,index) in task.prepareUser" :key="item.id">
               <view class="user-name">{{item.name}}</view>
               <view class="user-phone">{{item.phone}}</view>
               <!-- <view class="user-detail">
                <view class="detail-text">详情</view>
                 <view class="icon"><u-icon name="arrow-right" 
                   color=" rgba(42, 199, 123, 1)"
                      size="12"></u-icon></view>
                </view> -->
              </view>
                    </view>
          </scroll-view>
       </view>
       
       <view class="user-line"></view>
       <view class="update-btn" @click.native="toUpdateDetail">
         <view class="detail-text">编辑详情</view></view>
     </view>
    
 </view>
</template>

<script>
  export default {
    onLoad(option){     
      this.getTaskDetail(option.id)
	     },
    data() {
      return {
        scrollWith: 0,
        bgImageSrc:`${this.$baseUrl}/image/download?name=bgMsg.jpg`,
        task:{
          id:0,
          title:'',
          grade:0,
          detail:'',
          publishTime:'',
          publishUser:{
           name:'',
           phone:'',
          },
          startTime:'',
          endTime:'',
          userNum:0,
          address:'',
          finished:false,
          joinedUser:[],
          prepareUser:[]
        },
      };
    },
    methods:{
      async toUserDetail(uid){
        uni.navigateTo({
          url:'/pages/userDetail/userDetail?id='+uid
        })
      },
      async toUpdateDetail(){
        console.log(this.task.id)
        uni.navigateTo({
		//编辑任务
          // url:'/pages/addTask/addTask?id='+this.task.id
          // url:'package_admin/addTask/addTask?id='+this.task.id
          url: '/package_admin/addTask/addTask?id=' + this.task.id
        })
        // url:`${this.$baseUrl}/task/UDetail/${id}`,
      },
      async getTaskDetail(id){
        this.$request({
          url:`${this.$baseUrl}/task/detail/${id}`,
          method:'GET',
        }).then(res=>{
          console.log(res.data.data)
          this.task=res.data.data
          var length1 = this.task.joinedUser.length
          var length2 = this.task.prepareUser.length   
          this.scrollWith = (length1 + length2 + 4)*400 + 'rpx'
          // console.log(this.scrollWith)		  
        })
      },
      // 紧急呼叫
      async callSupport(phone){
        // console.log("拨打电话")
        uni.makePhoneCall({
          phoneNumber:phone.toString()//this.servicePhone是你要拨打的电话号码
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .content{
    .user-line{
      height: 1px;
      width: 686rpx;
      margin-left: 32rpx;
      border-bottom: 1px solid rgba(245, 245, 245, 1);            
    }
    .activity-body{
      .body-join-user{
        .user-list{
          margin-top: 32rpx;
          margin-left: 24rpx;
          .scroll-box{
            // min-width: 3000rpx;
            display: flex;
            //margin-left: 32rpx;
            //margin-top: 24rpx;
            // margin-right: 32rpx;
            height: 222rpx;
            //overflow: hidden;  // 隐藏超出部分
            //overflow-x: scroll;// 设置纵向滚动效果，x为横向
            // background-color: #53c21d;
            // border: 1px solid red;
            // overflow: scroll;
            .user-item{
              .user-name{
                margin-top: 44rpx;
                // margin-left: 68rpx;
                min-width: 56rpx;
                height: 40rpx;
                font-size: 28rpx;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 0px;
                color: rgba(51, 51, 51, 1);
                // text-align: right;
                vertical-align: top;
                // text-align: center;
                // border: 1px solid red;
              }
              .user-phone{
                width: 160rpx;
                height: 34rpx;
                // text-align: center;
                // margin-left: 16rpx;
                margin-top: 12rpx;
                font-size: 24rpx;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 0px;
                color: rgba(102, 102, 102, 1);
                text-align: right;
                vertical-align: top;
                
              }
              .user-detail{
                .icon{
                  width: 24rpx;
                  height: 24rpx;
                  border-radius: 2px;
                }
                .detail-text{
                  margin-left: 10rpx;
                  width: 48rpx;
                  height: 32rpx;
                  // margin-top: 4rpx;
                  line-height: 32rpx;
                  font-size: 24rpx;
                  font-weight: 400;
                  letter-spacing: 0px;
                  // line-height: 0px;
                  color: rgba(42, 199, 123, 1);
                  // text-align: right;
                  vertical-align: top;
                }
                border-radius: 24rpx;
                background: rgba(221, 245, 233, 1);
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 4px 12px 4px 12px;
                // margin-left: 27rpx;
                width: 94rpx;
                height: 36rpx;
              }
              align-items: center;
              display: flex;
              flex-direction: column;
              height: 192rpx;
              width: 190rpx;
              opacity: 1;
              border-radius: 4px;            
              border: 1px solid rgba(204, 204, 204, 1);      
              margin-right: 12rpx;
              margin-top: 10rpx;
            }
              
          }               
        }
        .suffix{
          .body-icon-suffix{
            margin-left: 6rpx;
            margin-top: 34rpx;
          }
          .body-suffix{
            margin-top: 28rpx;
            margin-left: 428rpx;
            width: 58rpx;
            height: 34rpx;
            // opacity: 1;
            font-size: 24rpx;
            font-weight: 400;
            letter-spacing: 0px;
            // line-height: 0px;
            color: rgba(153, 153, 153, 1);
            text-align: left;
            vertical-align: top;
            // background-color: red;
          }
          .body-name{
            // background-color: #53c21d;
            margin-left: 16rpx;
            margin-top: 28rpx;
            font-size: 28rpx;
            width: 112rpx;
            height: 40rpx;
            font-weight: 400;
            letter-spacing: 0px;
            // line-height: 0px;
            color: rgba(102, 102, 102, 1);
            text-align: left;
            vertical-align: top;
          }
          .body-icon{
            margin-top: 28rpx;
            margin-left: 32rpx;
            width: 40rpx;
            height: 40rpx;
            opacity: 1;
            border-radius: 4rpx;
            // background: blue 
          }
          display: flex;
          width: 100%;
          height: 50rpx;
          // background-color: #53c21d;                   
        }
        height: 310rpx;
        display: flex;
        flex-direction: column;
        // border: 1px solid rgba(245, 245, 245, 1); 
      }
      
      .body-item-address{
        .body-suffix{
          margin-top: 28rpx;
          margin-left: 182rpx;
          width: 392rpx;
          height: 34rpx;
          // opacity: 1;
          font-size: 28rpx;
          font-weight: 600;
          letter-spacing: 0px;
          overflow: hidden;
          text-align: right;
          // line-height: 0px;
          color: rgba(51, 51, 51, 1);
          text-align: right;
          vertical-align: top;
        }
        .body-name{
          margin-left: 16rpx;
          margin-top: 28rpx;
          font-size: 28rpx;
          // width: 112rpx;
          height: 40rpx;
          font-weight: 400;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(102, 102, 102, 1);
          text-align: left;
          vertical-align: top;
        }
        display: flex;
        .body-icon{
          // margin-left: 16rpx;
          margin-top: 28rpx;
          width: 40rpx;
          height: 40rpx;
          opacity: 1;
          border-radius: 4rpx;
          // background: blue 
        }
        margin-left: 32rpx;
        width: 686rpx;
        height: 96rpx;
        opacity: 1;
        // background: rgba(204, 204, 204, 1);
        border-bottom: 1px solid rgba(235, 235, 235, 1.0);
      }
      .body-item-start-time{
        .body-suffix{
          margin-top: 28rpx;
          margin-left: 224rpx;
          width: 294rpx;
          height: 34rpx;
          // opacity: 1;
          font-size: 28rpx;
          font-weight: 600;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(51, 51, 51, 1);
          text-align: right;
          vertical-align: top;
        }
        .body-name{
          margin-left: 16rpx;
          margin-top: 28rpx;
          font-size: 28rpx;
          // width: 112rpx;
          height: 40rpx;
          font-weight: 400;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(102, 102, 102, 1);
          text-align: left;
          vertical-align: top;
        }
        display: flex;
        .body-icon{
          // margin-left: 16rpx;
          margin-top: 28rpx;
          width: 40rpx;
          height: 40rpx;
          opacity: 1;
          border-radius: 4rpx;
          // background: blue 
        }
        margin-left: 32rpx;
        width: 686rpx;
        height: 96rpx;
        opacity: 1;
        // background: rgba(204, 204, 204, 1);
        border-bottom: 1px solid rgba(235, 235, 235, 1.0);
      }
      
      .body-item-phone{
        .body-suffix{
          margin-top: 28rpx;
          margin-left: 392rpx;
          width: 84rpx;
          height: 34rpx;
          // opacity: 1;
          font-size: 28rpx;
          font-weight: 600;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(51, 51, 51, 1);
          text-align: right;
          vertical-align: top;
        }
        .body-name{
          margin-left: 16rpx;
          margin-top: 28rpx;
          font-size: 28rpx;
          // width: 112rpx;
          height: 40rpx;
          font-weight: 400;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(102, 102, 102, 1);
          text-align: left;
          vertical-align: top;
        }
        display: flex;
        .body-icon{
          // margin-left: 16rpx;
          margin-top: 28rpx;
          width: 40rpx;
          height: 40rpx;
          opacity: 1;
          border-radius: 4rpx;
          // background: blue 
        }
        margin-left: 32rpx;
        width: 686rpx;
        height: 96rpx;
        opacity: 1;
        // background: rgba(204, 204, 204, 1);
        border-bottom: 1px solid rgba(235, 235, 235, 1.0);
      }
      
      .body-item2{
        .body-suffix{
          margin-top: 28rpx;
          margin-left: 462rpx;
          width: 84rpx;
          height: 34rpx;
          // opacity: 1;
          font-size: 28rpx;
          font-weight: 600;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(51, 51, 51, 1);
          text-align: right;
          vertical-align: top;
        }
        .body-name{
          margin-left: 16rpx;
          margin-top: 28rpx;
          font-size: 28rpx;
          // width: 112rpx;
          height: 40rpx;
          font-weight: 400;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(102, 102, 102, 1);
          text-align: left;
          vertical-align: top;
        }
        display: flex;
        .body-icon{
          // margin-left: 16rpx;
          margin-top: 28rpx;
          width: 40rpx;
          height: 40rpx;
          opacity: 1;
          border-radius: 4rpx;
          // background: blue 
        }
        margin-left: 32rpx;
        width: 686rpx;
        height: 96rpx;
        opacity: 1;
        // background: rgba(204, 204, 204, 1);
        border-bottom: 1px solid rgba(235, 235, 235, 1.0);
      }
      .body-item{
        .body-suffix{
          margin-top: 22rpx;
          margin-left: 484rpx;
          width: 32rpx;
          height: 34rpx;
          // opacity: 1;
          font-size: 28rpx;
          font-weight: 600;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(51, 51, 51, 1);
          text-align: right;
          vertical-align: top;
        }
        .body-name{
          margin-left: 16rpx;
          margin-top: 22rpx;
          font-size: 28rpx;
          // width: 112rpx;
          height: 40rpx;
          font-weight: 400;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(102, 102, 102, 1);
          text-align: left;
          vertical-align: top;
        }
        display: flex;
        .body-icon{
          // margin-left: 16rpx;
          margin-top: 22rpx;
          width: 40rpx;
          height: 40rpx;
          opacity: 1;
          border-radius: 4rpx;
          // background: blue 
        }
        margin-left: 32rpx;
        width: 686rpx;
        height: 90rpx;
        opacity: 1;
        // background: rgba(204, 204, 204, 1);
        border-bottom: 1px solid rgba(235, 235, 235, 1.0);
      }
      .activity-status-end{
          .body-suffix{
            margin-top: 36rpx;
            margin-left: 454rpx;
            width: 120rpx;
            height: 48rpx;
            opacity: 1;
            border-radius: 4rpx;
            background: rgba(253, 125, 115, 1);
            font-size: 24rpx;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 48rpx;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            vertical-align: top;
          }
          .body-name{
            margin-left: 16rpx;
            margin-top: 36rpx;
            font-size: 28rpx;
            width: 56rpx;
            height: 40rpx;
            font-weight: 400;
            letter-spacing: 0px;
            // line-height: 0px;
            color: rgba(102, 102, 102, 1);
            text-align: left;
            vertical-align: top;
          }
          display: flex;
          .body-icon{
            // margin-left: 32rpx;
            margin-top: 36rpx;
            width: 40rpx;
            height: 40rpx;
            opacity: 1;
            border-radius: 4rpx;
            // background: blue 
          }
          margin-left: 32rpx;
          width: 686rpx;
          height: 110rpx;
          opacity: 1;
          // background: rgba(204, 204, 204, 1);
          border-bottom: 1px solid rgba(235, 235, 235, 1.0);            
        }
      
      .activity-status{
        .body-suffix{
          margin-top: 36rpx;
          margin-left: 454rpx;
          width: 120rpx;
          height: 48rpx;
          opacity: 1;
          border-radius: 4rpx;
          background: rgba(90, 221, 158, 1);
          font-size: 24rpx;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 48rpx;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          vertical-align: top;
        }
        .body-name{
          margin-left: 16rpx;
          margin-top: 36rpx;
          font-size: 28rpx;
          width: 56rpx;
          height: 40rpx;
          font-weight: 400;
          letter-spacing: 0px;
          // line-height: 0px;
          color: rgba(102, 102, 102, 1);
          text-align: left;
          vertical-align: top;
        }
        display: flex;
        .body-icon{
          // margin-left: 32rpx;
          margin-top: 36rpx;
          width: 40rpx;
          height: 40rpx;
          opacity: 1;
          border-radius: 4rpx;
          // background: blue 
        }
        margin-left: 32rpx;
        width: 686rpx;
        height: 110rpx;
        opacity: 1;
        // background: rgba(204, 204, 204, 1);
        border-bottom: 1px solid rgba(235, 235, 235, 1.0);            
      }
    }
    .line-box{
      width: 750rpx;
      height: 66rpx;
      opacity: 1;
      line-height: 66rpx;
      background: rgba(245, 245, 245, 1);
      display: flex;
      .right-line{
        margin-left: 16rpx;
        height: 33rpx;
        // margin-top: 34rpx;
        width: 96rpx;
        // background: rgba(204, 204, 204, 1);
        border-bottom: 1px solid rgba(204, 204, 204, 1);    
      }
      .devide-text{
        width: 96rpx;
        height: 34rpx;
        opacity: 1;
        /** 文本1 */
        font-size: 24rpx;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 0px;
        color: rgba(102, 102, 102, 1);
        text-align: left;
        vertical-align: top;
        margin-left: 16rpx;
        margin-top: 32rpx;
      }
      .left-line{
        margin-left: 216rpx;
        height: 33rpx;
        // margin-top: 34rpx;
        width: 96rpx;
        // background: rgba(204, 204, 204, 1);
        border-bottom: 1px solid rgba(204, 204, 204, 1);    
      }
    }
    .activity-detail{
      margin-left: 32rpx;
      margin-top: 12rpx;
      width: 686rpx;
      height: 176rpx;
      opacity: 1;
      /** 文本1 */
      font-size: 28rpx;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 22px;
      color: rgba(102, 102, 102, 1);
      text-align: left;
      vertical-align: top;
    }
    .activity-title{
      margin-left: 32rpx;
      margin-top: 24rpx;
      width: 224px;
      height: 46rpx;
      opacity: 1;
      font-size: 32rpx;
      font-weight: 600;
      letter-spacing: 0px;
      // line-height: 0px;
      color: rgba(51, 51, 51, 1);
      text-align: left;
      vertical-align: top;
    }
    .bg-image{
      margin-top: 32rpx;
      margin-left: 32rpx;
      width: 343px;
      height: 160px;
      opacity: 1;
      border-radius: 4px;
      // background-color: rebeccapurple;
      image{
        width: 343px;
        height: 160px;
      }
    }
    position: absolute;
    background: rgba(255, 255, 255, 1);
    width: 2364rpx;
  }
  .update-btn{
    margin-left: 32rpx;
    margin-top: 48rpx;
    width: 686rpx;
    height: 88rpx;
    opacity: 1;
    border-radius: 4px;
    background: rgba(237, 242, 254, 1);
    line-height: 88rpx;
    .detail-text{
      margin-top: 22rpx;
      margin-left: 280rpx;
      width: 128rpx;
      height: 46rpx;
      opacity: 1;
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0px;
      // line-height: 0px;
      color: rgba(52, 125, 250, 1);
      text-align: center;
      vertical-align: top;
    }
    // height: 80rpx;
    // width: 30%;
    // background-color: #53c21d;
    // line-height: 80rpx;
    // margin: 20rpx ;
    // text-align: center;
    // border-radius: 30rpx;
  }
  .content{
    padding-bottom: 20%;
    // background-color: #f4f4f5;
  }
  .task-joinUser{
    width: 80%;
    min-height: 180rpx;
    border: 1px solid gray;
    margin: 10rpx auto;
    padding: 20rpx;
    border-radius: 10rpx;
    background-color: beige;
    .task-joinUser-item{
      margin: 10rpx auto;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      // background-color: beige;
      border: 1px solid skyblue;
      display: flex;
      justify-content: center;
      border-radius: 10rpx;
      .user-detail{
        height: 60rpx;
        line-height: 60rpx;
        width: 80rpx;
        text-align: center;
        border-radius: 10rpx;
        margin-top: 10rpx;
        background-color: #53c21d;
      }
      view{
        margin: 0 auto;
        // line-height: 80rpx;
        // background-color: blue;
      }
    }
  }
  .task-detail{
    padding: 20rpx;
  }
.task-detail-content{
  text-indent: 2rem;
}
</style>
